<template>
  <vs-navbar
    not-line
    shadow
    center-collapsed
    v-model="navActive"
    class="navbar"
  >
    <template #left>
      <img
        src="../../assets/logoNocolor.png"
        id="logo"
        alt="Hey,there!I am KeyWall!"
      />
      <!-- <vs-navbar-item
        :active="navActive == 'index'"
        to="/AllGallery"
        id="index"
        @click="navActive = 'index'"
      > -->
      <vs-navbar-item
        to="/AllGallery"
        id="index"
      >
        主页
      </vs-navbar-item>
      <vs-navbar-item @click="sub()">
        关注
      </vs-navbar-item>
      <vs-navbar-item @click="fri()">
        朋友圈
      </vs-navbar-item>
      <vs-navbar-item @click="pro()">
        高级搜索
      </vs-navbar-item>
    </template>
    <vs-input v-model="value" placeholder="搜索站内图片">
      <template #icon>
        <i class="bx bxs-search"></i>
      </template>
    </vs-input>
    <vs-button icon color="#7d33ff" relief @click="search">
      <i class="bx bxs-paper-plane"></i>
    </vs-button>
    <template #right>
      <vs-avatar size='37' style="margin-right: 10px">
        <router-link to="/UserCenter" @click="navActive = ''">
          <i class="bx bx-user"></i>
        </router-link>
      </vs-avatar>
      <vs-button to="/UploadGallery" @click="navActive = ''"
        >上传图片</vs-button
      >
    </template>
  </vs-navbar>
</template>

<script>
export default {
  name: "navBar",
  data: () => ({
    value: "",
    navActive: "index",
  }),
  methods: {
    pro(){
      this.$router.push({path:"/searchpro"});
    },
    async sub(){
      this.$router.push({
        path:"/upman",
      });
    },
    async fri(){
      this.$router.push({
        path:"/friend"
      });
    },
    async search() {
      if (this.value != "") {
        this.$router.push({
          path: "/search",
          query: {
            value: this.value,
            status:1,
          },
        });
      }
    },
    // async search() {
    //   console.log(await localStorage.getItem("token"));
    //   let res = await this.$http.post(
    //     "/api/gallery/searchBody",
    //     { body: this.value },
    //     {
    //       headers: {
    //         pass: "",
    //         Authorization: "Bearer " + (await localStorage.getItem("token")),
    //       },
    //     }
    //   );

    //   console.log(res.data);
    //   await this.$vs.notification({
    //     title: "有" + res.data.result.length + "匹配项",
    //   });
    // },
  },
};
</script>

<style scoped>
#logo {
  height: 40px;
  margin: 0px 10px;
}
.navbar {
  z-index: 10;
  min-height: 60px;
}
</style>